/**
 * @description 瀑布流方法
 * @param {String} selector = [.item] 瀑布流的选择器
 * @param {Number} column = [2] 栏的数量
 * @param {Number} gap = [10] 栏间距
 * @param {document|HTMLElement}  = [document] 瀑布流参照父节点
 */
function waterFall(selector=".item",column=2,gap=10,parent=document){
				// 分两栏
				// var column = 2;
				// 间距
				// var gap = 10;
				// 列宽 一列的宽度(动态计算间距)
				var width = window.innerWidth;
				if(parent!=document){
					parent.style.position ="relative";
					width = parent.offsetWidth;
				}
				var colWidth = (width-(column+1)*gap)/column;
				// 数组存储高度（记录最小高都）
				var arr = [];
				// 设置数组长度
				arr.length = column;
				// 填充初始值为0;（默认值为0）
				arr.fill(0);
				// 获取所有的item
				
				var items = parent.querySelectorAll(selector);
				// 遍历items
				for(var i=0;i<items.length;i++){
					// 绝对定位
					items[i].style.position = "absolute";
					// 设置宽
					items[i].style.width = colWidth+"px";
					// 找到arr数组的最小的列
					var min = Math.min(...arr);
					var minIndex = arr.indexOf(min);
					// 动态算出left和top值
					// 如果minINdex值是0// left = 0*10+10+172.5*0+"px" 10px					
					// 如果minIndex值1 // left = 1*10+10+172.5*1+"px"192.5px					
					items[i].style.left= minIndex*gap+gap+colWidth*minIndex+"px";
					items[i].style.top = arr[minIndex]+gap+"px";
					// 获取元素的高
					var h = items[i].offsetHeight;				 
					// 更新minIndex的值 = 原来的值+元素的高+间距
					arr[minIndex]=arr[minIndex]+h+gap;
					
				}
			
}
export default waterFall;